<template>
  <div class="home_cell statusBar second">
    <van-swipe class="my-swipe" indicator-color="white" width="100%">
      <van-swipe-item>
        <section class="devInfo">
          <ul class="infoList">
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{ lbedCondition==0?this.$t("translate7"):lbedCondition==1?this.$t("translate8"):lbedCondition==2?this.$t("translate9"):this.$t("translate10")}}</span>
                 
                </p>
                <p class="infoName" @click="handlClick('m')">
                  {{ $t("translate1") }}
                  <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" />
                </p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number" style="font-size: 2.4rem;">{{ lrespiratoryRate }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick('m')">{{ $t("translate2") }}
                  <img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" /></p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number" style="font-size: 2.4rem;">{{ lheartRate }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick('m')">
                  {{ $t("translate3")
                  }}<img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" />
                </p>
              </div>
            </li>
          </ul>
        </section>
      </van-swipe-item>
      <van-swipe-item>
        <section class="devInfo">
          <ul class="infoList">
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number">{{  rbedCondition==0?this.$t("translate7"):rbedCondition==1?this.$t("translate8"):rbedCondition==2?this.$t("translate9"):this.$t("translate10") }}</span>
                
                </p>
                <p class="infoName" @click="handlClick('y')">
                  {{ $t("translate4")
                  }}<img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" />
                </p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum" >
                  <span class="number" style="font-size: 2.4rem;">{{ rrespiratoryRate }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick('y')">
                  {{ $t("translate5")
                  }}<img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" />
                </p>
              </div>
            </li>
            <div class="infoLine"></div>
            <li class="infoItem">
              <div class="infoWrap">
                <p class="infoNum">
                  <span class="number" style="font-size: 2.4rem;">{{ rheartRate }}</span>
                  <span class="unit">{{ $t("translate11") }}</span>
                </p>
                <p class="infoName" @click="handlClick('y')">
                  {{ $t("translate6")
                  }}<img :src="icon" style="width: 0.8rem; height: 1.6rem" alt="" />
                </p>
              </div>
            </li>
          </ul>
        </section>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
  <script>
import { mapGetters, mapState } from "vuex";
import { generateWifiPromise } from "@/util/index.js";
export default {
  name: "HomeStatus",
  props: {},
  computed: {
    ...mapState(["devImg", "logo", "devId"]),
    ...mapGetters(["imgPath"]),
    ...mapState({
      lbedCondition: (state) => state.bedCondition.lbedCondition,
      rbedCondition: (state) => state.bedCondition.rbedCondition,
      lheartRate: (state) => state.bedCondition.lheartRate,
      lrespiratoryRate: (state) => state.bedCondition.lrespiratoryRate,
      rheartRate: (state) => state.bedCondition.rheartRate,
      rrespiratoryRate: (state) => state.bedCondition.rrespiratoryRate,
    }),

    sitPostureName() {
      switch (this.sitPosture) {
        case 0:
          return this.$t("enum1");
        case 1:
          return this.$t("enum2");
        case 2:
          return this.$t("enum3");
        case 3:
          return this.$t("enum4");
        case 4:
          return this.$t("enum5");
      }
    },
    date() {
      let date = new Date();
      let obj = {};
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      obj.startTime = JSON.stringify(
        new Date(year + "/" + month + "/" + day + " 00:00:00").getTime()
      ).substring(0, 10);
      obj.endTime = JSON.stringify(
        new Date(year + "/" + month + "/" + day + " 23:59:59").getTime()
      ).substring(0, 10);
      return obj;
    },

    icon() {
      console.log("this.imgPath", this.imgPath);
      return require(`../assets/${this.imgPath}ic_right.png`);
    },
  },
  data() {
    return {
      sitPostureChangeCountThis: 0,
      seatedCountThis: 0,
      eventTime2This: 0,
      countSet: 0
    }
  },
  watch: {
    // devId: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // seatedCount: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // sitPostureChangeCount: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // },
    // eventTime: {
    //   handler(newVal, oldVal) {
    //     this.getData()
    //   },
    // }

  },
  mounted() {

    // this.getData()


  },
  methods: {
    getData2(startTime, endTime, dateType) {
      let p1 = generateWifiPromise({
        method: "getDevStatisticsDataWithQuery",
        params: [
          this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
          JSON.stringify({
            devId: this.devId,
            sid: "eventTime",
            character: "sittingcount1",
            startTime: startTime,
            endTime: endTime,
            pageSize: "31",
            accuracy: "DAILY",
          }),
        ],
        callback: "callback1",
      });
      let p2 = generateWifiPromise({
        method: "getDevStatisticsDataWithQuery",
        params: [
          this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
          JSON.stringify({
            devId: this.devId,
            sid: "eventTime",
            character: "sittingcount2",
            startTime: startTime,
            endTime: endTime,
            pageSize: "31",
            accuracy: "DAILY",
          }),
        ],
        callback: "callback2",
      });
      let p3 = generateWifiPromise({
        method: "getDevStatisticsDataWithQuery",
        params: [
          this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
          JSON.stringify({
            devId: this.devId,
            sid: "eventTime",
            character: "sittingcount3",
            startTime: startTime,
            endTime: endTime,
            pageSize: "31",
            accuracy: "DAILY",
          }),
        ],
        callback: "callback3",
      });
      let p4 = generateWifiPromise({
        method: "getDevStatisticsDataWithQuery",
        params: [
          this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
          JSON.stringify({
            devId: this.devId,
            sid: "eventTime",
            character: "sittingcount4",
            startTime: startTime,
            endTime: endTime,
            pageSize: "31",
            accuracy: "DAILY",
          }),
        ],
        callback: "callback4",
      });

      Promise.all([p1, p2, p3, p4])
        .then((result) => {
          console.log("result", result); //['成功了', 'success']
          let all = 0;
          for (let i = 0; i < result.length; i++) {

            result[i].devDatas.forEach((e) => {
              all += parseInt(e.sum);
            });
          }




          this.countSet = all
        })
        .catch((error) => {
          console.log("报错了");
          console.log(error);
        });
    },
    getData() {
      this.getData2(this.date.startTime, this.date.endTime, "")
      window.hilink.getDevStatisticsDataWithQuery(

        this.devId,
        JSON.stringify({
          devId: this.devId,
          sid: "sitPosture",
          character: "sitPostureChangeCount",
          startTime: this.date.startTime,
          endTime: this.date.endTime,
          pageSize: "31",
          accuracy: "DAILY",
        }),
        "Ag.resultCallback33" // resultCallback，成功或失败时，将调用传入resultStr返回结果
      );

      window.Ag.resultCallback33 = (res) => {
        console.log("sitPostureChangeCountres:", res);
        this.sitPostureChangeCountThis = parseInt(JSON.parse(res).devDatas[0].sum);
        this.$store.commit("UPDATE_STATE", {
          name: "seatedCountThis",
          value: this.sitPostureChangeCountThis
        })
      };
      window.hilink.getDevStatisticsDataWithQuery(

        this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
        JSON.stringify({
          devId: this.devId,
          sid: "seated",
          character: "seatedCount",
          startTime: this.date.startTime,
          endTime: this.date.endTime,
          pageSize: "31",
          accuracy: "DAILY",
        }),
        "Ag.resultCallback34" // resultCallback，成功或失败时，将调用传入resultStr返回结果
      );

      window.Ag.resultCallback34 = (res) => {
        console.log("seatedCount:", res);
        this.seatedCountThis = parseInt(JSON.parse(res).devDatas[0].sum);

      };
      window.hilink.getDevStatisticsDataWithQuery(

        this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
        JSON.stringify({
          devId: this.devId,
          sid: "eventTime",
          character: "eventTime2",
          startTime: this.date.startTime,
          endTime: this.date.endTime,
          pageSize: "31",
          accuracy: "DAILY",
        }),
        "Ag.resultCallback35" // resultCallback，成功或失败时，将调用传入resultStr返回结果
      );

      window.Ag.resultCallback35 = (res) => {
        console.log("eventTime2:", res);
        this.eventTime2This = parseInt(JSON.parse(res).devDatas[0].sum);
      };
    },

    handlClick(i) {
      if (i == "m") {
        this.$router.push({ path: "/versionInfo", query: { 'active': "m" } });
      } else {
        this.$router.push({ path: "/WaistPosture", query: { 'active': "y" } });
      }
   
    },
  },

};
</script>
  
  <style lang='less' scoped>
.second {
  width: calc(100% - 1.2rem);
  margin: 0 0.6rem;
  color: rgba(0, 0, 0, 0.9);
  background-color: #fff;
  border-radius: 1.6rem;
  opacity: 1;
  position: relative;
  height: 10.4rem;
  margin-bottom: 1.2rem;
  border-radius: 1.6rem;
}

.van-swipe {
  width: 100%;
  height: 8.8rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 8.8rem;
  text-align: center;
  // background-color: #39a9ed;
}

/deep/.van-swipe__indicators {
  bottom: 0 !important;
}

/deep/i.van-swipe__indicator.van-swipe__indicator--active {
  width: 1.2rem;
  height: 0.6rem;
  border-radius: 2.5rem;
  background-color: var(--xwq_color) !important;
}

/deep/.van-swipe__indicator {
  background: #6c6363;
  bottom: 0.8rem;
}

// .van-swipe__indicator{
// width: 1rem;
// height: 0.6rem;
// border-radius: 35%;
// }
.dark {
  .home_cell {
    background: #303030;
    color: rgba(255, 255, 255, 0.86);

    .dev {
      color: #ffff F;
    }
  }
}

.devInfo {
  // width: 100%;
  // margin-top:1.2rem;
  // height: 8.8rem;
  // border-radius: 1.6rem;
  // background: white;
  // position: relative;
}

.dark .devInfo {
  background: #303030;
}

.devInfo .infoList {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  text-align: center;
}

.devInfo .infoList .infoItem {
  width: calc(((100% - 0.6rem) / 3));
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devInfo .infoList .infoItem .infoWrap {
  padding: 0 0.4rem;
  width: 100%;
}

.devInfo .infoList .infoItem .infoWrap .infoNum {
  align-self: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0;
}

.devInfo .infoList .infoItem .infoWrap .infoNum .number {
  font-size: 2rem;
  padding-right: 0.2rem;
  color: rgba(0, 0, 0, 0.9);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .number {
  color: rgba(255, 255, 255, 0.86);
}

.devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  color: rgba(255, 255, 255, 0.6);
}

.devInfo .infoList .infoItem .infoWrap .infoName {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .devInfo .infoList .infoItem .infoWrap .infoName {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.devInfo .infoList .infoLine {
  width: 0.1rem;
  height: 3.2rem;
  align-self: center;
  background: rgba(0, 0, 0, 0.2);
  // transform: scaleX(0.25);
}

.dark .infoList .infoLine {
  background: rgba(255, 255, 255, 0.2);
}

.devInfo .infoList .line:last-child {
  border-right: none;
}
</style>
  